<template>
    <div class="user-container">
        <div class="user-header">
            <a-button type="primary" @click="addUser">添加用户</a-button>
        </div>
        <a-table :columns="columns" :data-source="data" bordered>
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'userName'">
                    <a>{{ record.userName }}</a>
                </template>
                <template v-if="column.dataIndex === 'action'">
                    <a @click="editUser(record)">编辑</a>
                    <a-divider type="vertical" />

                    <a-popconfirm title="确定删除该数据吗？" ok-text="确定" cancel-text="取消" @confirm="deleteUser(record)">
                        <a class="danger">删除</a>
                    </a-popconfirm>


                </template>
            </template>
        </a-table>

        <a-modal v-model:open="open" :title="title" :footer="null">
            <a-form ref="formRef" :model="formData" :rules="rules">
                <a-form-item label="用户名" name="username">
                    <a-input v-model:value="formData.username" placeholder="请输入用户名" />
                </a-form-item>
                <a-form-item label="性别" name="sex">
                    <a-input v-model:value="formData.sex" placeholder="请输入性别" />
                </a-form-item>
                <a-form-item label="年龄" name="age">
                    <a-input v-model:value="formData.age" placeholder="请输入年龄" />
                </a-form-item>
                <a-form-item label="密码" name="password">
                    <a-input v-model:value="formData.password" type="password" placeholder="请输入密码" />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" @click="handleOk">确定</a-button>
                    <a-button type="primary" @click="open = false">取消</a-button>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';

const columns = [
    {
        title: '用户名',
        dataIndex: 'userName',
    },
    {
        title: '性别',
        dataIndex: 'sex',
    },
    {
        title: '年龄',
        dataIndex: 'age',
    },
    {
        title: '密码',
        dataIndex: 'password',
    },
    {
        title: '操作',
        dataIndex: 'action',
    }
];
const data = ref([]);

const open = ref(false)
const title = ref('新增用户')

onMounted(() => {
    data.value = JSON.parse(localStorage.getItem('user') || '[]')
})

const addUser = () => {
    title.value = '新增用户'
    formData.value = {
        username: '',
        sex: '',
        age: '',
        password: ''
    }
    open.value = true
}

const editUser = (record) => {
    title.value = '编辑用户'
    formData.value = {
        ...record,
        username: record.userName
    }
    open.value = true
}

const deleteUser = (record) => {
    const list = JSON.parse(localStorage.getItem(table.value) || '[]')

    const index = list.findIndex(v => v.userName == record.userName)

    list.splice(index, 1)

    localStorage.setItem(table.value, JSON.stringify(list))

    data.value = JSON.parse(localStorage.getItem(table.value) || '[]')

    message.info('删除成功')
}







const formData = ref({
    username: '',
    sex: '',
    age: '',
    password: ''
})
const rules = {
    username: [
        { required: true, message: '请输入用户名' }
    ],
    password: [
        { required: true, message: '请输入密码' }
    ]
}
const formRef = ref(null)

const handleOk = () => {
    formRef.value.validate().then(() => {
        saveData(formData.value.username, formData.value.sex, formData.value.age, formData.value.password)
        open.value = false

        data.value = JSON.parse(localStorage.getItem(table.value) || '[]')
    }).catch(() => {
        console.log('验证失败')
    })
}

const table = ref("user")

const saveData = (userName, sex, age, password) => {

    const list = JSON.parse(localStorage.getItem(table.value) || '[]')

    const index = list.findIndex(v => v.userName == userName)

    const isAdd = title.value == '新增用户' ? true : false

    if (isAdd) {
        // 新增
        if (index >= 0) {
            message.error('账号已存在，请更换')
            return
        }

        // localStorage.getItem(table.value) ? JSON.parse(localStorage.getItem(table.value)) : []

        list.push({
            userName: userName,
            sex: sex,
            age: age,
            password: password
        })

        localStorage.setItem(table.value, JSON.stringify(list))
        message.info('新增成功')
    } else {
        // 编辑
        list[index] = {
            userName: userName,
            sex: sex,
            age: age,
            password: password
        }
        localStorage.setItem(table.value, JSON.stringify(list))
        message.info('编辑成功')
    }

}
</script>
<style scoped>
.user-container {
    padding: 15px;
    width: 100%;
    height: 100%;
}

.user-header {
    text-align: right;
}

.danger {
    color: red;
}
</style>